<template>
	<view style="background-color: #F7F7F7;">

		<view style="height:1rpx;"></view>

		<!-- 		<u-collapse ref="collapseInit1" :item-style="itemStyleBig" :head-style="bigHeadStyle" style="background-color: #F7F7F7; padding: 20rpx 20rpx 20rpx 20rpx;">
			<u-collapse-item :index="i" :title="big.bigChapter" v-for="(big, i) in itemList" :key="i" @change="itemChange">
				<view class="collapse-item">

					<u-collapse :item-style="itemStyleBig" :head-style="bigHeadStyle" style="background-color: #F7F7F7; padding: 0rpx 20rpx 0rpx 20rpx; margin: 0rpx 20rpx 0rpx 20rpx;">
						<u-collapse-item :index="j" :title="small.smallChapter" v-for="(small, j) in itemList[i].children" :key="j"
						 @change="itemChange">
							<view>

								<u-collapse :arrow="false" :head-style="videoHeadStyle" style="background-color: #F7F7F7; padding: 0rpx 20rpx 0rpx 20rpx; margin: 0rpx 20rpx 0rpx 20rpx;">
									<u-collapse-item :index="k" :title="video.videoName" v-for="(video, k) in itemList[i].children[j].children"
									 :key="k" @change="clickVideo(itemList[i].children[j].children[k].id, video.videoName)">
										<view>
										</view>
									</u-collapse-item>
								</u-collapse>

							</view>
						</u-collapse-item>
					</u-collapse>
					
				</view>
			</u-collapse-item>
		</u-collapse> -->

		<view v-if="show">
			<view v-if="itemList.length == 0" style="margin-top: 50rpx; text-align: center;font-size:100%; color: #909399;">
				（暂无课件）
			</view>
			<view v-else>
				<u-collapse ref="collapseInit1" :item-style="itemStyleBig" :head-style="bigHeadStyle" style="background-color: #F7F7F7; padding: 20rpx 20rpx 20rpx 20rpx;">
					<u-collapse-item :index="i" :title="big.bigChapter" v-for="(big, i) in itemList" :key="i" @change="itemChange">
						<view class="collapse-item">

							<!-- 空大章节 -->
							<view v-if="!big.children" style="margin-left: 40rpx; font-size: 100%;">
								（暂无视频）
							</view>
							<!-- 非空大章节 -->
							<view v-else>

								<view v-for="(small, j) in itemList[i].children" :key="j" style="color: #000000; margin-left: 40rpx; font-size: 130%;">
									{{small.smallChapter}}

									<!-- 空小章节 -->
									<view v-if="!small.children" style="font-size: 80%; margin-left: 40rpx;margin-bottom: 20rpx; margin-top: 20rpx; color: #909399;">
										（暂无视频）
									</view>
									<!-- 非空小章节 -->
									<view v-else>

										<view v-for="(video, k) in itemList[i].children[j].children" :key="k" style="margin-left: 40rpx;margin-bottom: 20rpx; margin-top: 20rpx; color: #909399;" @tap="clickVideo(video.id, video.videoName)">
											{{video.videoName}}
											<!-- <u-collapse :arrow="false" style="color: #909399;">
											<u-collapse-item :title="video.videoName" @change="clickVideo(itemList[i].children[j].children[k].id, video.videoName)"></u-collapse-item>
										</u-collapse> -->
										</view>
									</view>

								</view>

							</view>

						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCourseDetailsChapter
	} from '@/api/modules/course.js'

	export default {
		data() {
			return {
				show: false,
				courseInfoID: '', // 课程的唯一ID

				itemList: [
					// 	{
					// 	head: "赏识在于角度的转换",
					// 	body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					// 	open: true,
					// 	disabled: true
					// }, {
					// 	head: "生活中不是缺少美，而是缺少发现美的眼睛",
					// 	body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					// 	open: false,
					// }, {
					// 	head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					// 	body: "11111111111111111111111111111111111111111111111111",
					// 	open: false,
					// },
				],
				itemStyleBig: {
					marginTop: '15rpx',
					// marginBottom: '40rpx',
					paddingLeft: '20rpx',
					paddingBottom: '15rpx',
					borderBottom: '1px solid #dedede',
				},
				itemStyleSmall: {
					paddingTop: '0rpx',
					marginTop: '15rpx',
					marginBottom: '15rpx',
					borderBottom: '1px solid #dedede',
				},
				bigHeadStyle: {
					fontSize: '130%'
				},
				smallHeadStyle: {
					fontSize: '130%'
				},
				videoStyle: {
					fontSize: '130%',
					// marginTop: '15rpx',
					// marginBottom: '15rpx',
					borderBottom: '1px solid #dedede',
				},
				videoHeadStyle: {
					fontSize: '120%',
					color: '#757575'
				},
			}
		},
		props: {
			courseID: {
				type: String,
				default: 'Add'
			}
		},
		methods: {
			// 某个item被打开或者收起时触发
			itemChange(object) {
				// console.log(object)
			},
			clickVideo(object, title) {
				// console.log(object)

				uni.navigateTo({
					url: './courseDetails/components/video?videoID=' + object + '&title=' + title + '&courseInfoID=' + this.courseInfoID
				})
			},
		},
		watch: {

			courseID: {
				immediate: true, // 这句重要
				handler(val) {
					// 继续要处理的事件
					// console.log("获取课程章节")
					// console.log(val)

					// 获取课程ID对应的章节列表
					let data = {
						courseID: val
					}

					let that = this;

					that.courseInfoID = val;

					getCourseDetailsChapter(data)
						.then(resp => {
							that.itemList = JSON.parse(resp.data)
							that.show = true
							// that.$nextTick(() => {
							// 	that.$refs.collapseInit1.init()
							// })
							// console.log(JSON.parse(resp.data))
						})
						.catch(resp => {})
				}
			}

		},
		onLoad() {
			// console.log("获取课程章节")
		},
		onShow() {
			// console.log("获取课程章节")
		},
	}
</script>

<style>

</style>
